<template>
  <view class="xinguan_order">
    <!-- 订单每项item -->
    <view
      class="card order_item m14"
      v-for="(item, index) in coviduserOrderList"
      :key="item._id"
    >
      <text class="name">{{ item.name }}</text>
      <view class="flex-line address">
        <text>接种地点：</text>
        <text>{{ item.address }}</text>
      </view>

      <view class="flex-line yimiao_changjia">
        <text>疫苗厂商：</text>
        <text>{{ item.company }}</text>
      </view>

      <view class="flex-line jiezhong_time">
        <text>接种时间：</text>
        <text>{{ item.date }} {{ item.period }}</text>
      </view>

      <view
        class="cancel_btn"
        :class="{ preventStyle: !item.cancel }"
        @click="cancelYuYueFn(item._id, index)"
      >
        <text>{{ item.cancel ? "取消预约" : "已取消预约" }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { coviduserOrderApi, covidcancelApi } from "@/http/api";
import { onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
import type { coviduserOrderItem } from "@/tsDataType/dataType";

onShow(() => {
  getcoviduserOrderList();
});

//取消预约方法
const cancelYuYueFn = async (id: string, index: number) => {
  console.log(id, index);
  const res = await covidcancelApi(id);
  console.log("取消预约：", res);
  //将本地订单列表数组与取消id匹配的cancel置为false
  coviduserOrderList.value[index].cancel = false;

  //再拉取后台订单列表
  // getcoviduserOrderList();
};

//定义冠疫苗预约订单列表数组
const coviduserOrderList = ref<coviduserOrderItem[]>([]);

//获取冠疫苗预约订单列表
const getcoviduserOrderList = async () => {
  const res = await coviduserOrderApi();
  console.log("订单列表：", res);
  coviduserOrderList.value = res.data.data;
};
</script>

<style lang="scss">
@import "@/assets/style/public.scss";
page {
  box-sizing: border-box;
  background: #e4e4e4;
}

.m14 {
  margin: 14rpx;
}

.order_item {
  position: relative;
  padding-bottom: 80rpx !important;
  .name {
    border-bottom: 1px solid #e4e4e4;
    padding: 20rpx 0;
    display: block;
  }

  .flex-line {
    margin: 20rpx 0;
    display: flex;
    text {
      &:nth-of-type(1) {
        width: 150rpx;
        margin-right: 16px;
      }

      &:nth-of-type(2) {
        flex: 1;
      }
    }
  }

  .cancel_btn {
    position: absolute;
    right: 20rpx;
    bottom: 10rpx;
    border: 1px solid #eee;
    padding: 10rpx;
    padding: 16rpx 20rpx;
    border-radius: 10rpx;
    display: block;
    color: #ccc;
  }
}

.preventStyle {
  // border: 1px solid #f00 !important;
  //如果已取消预约，禁止用户再点击
  pointer-events: none;
}
</style>
